<!-- 科技培训报名 -->
<template>
	<div class="apply">
		<div class="apply_top">

			<div>
				<div style="display: flex;">
					<div class="apply_top_img_box">
						<img class="apply_top_img" :src="dataList.applayList.photoUrl" alt="">

					</div>
					<div class="apply_top_text" v-if="dataList.type == 1">
						<p class="snp1">{{dataList.applayList.trainingName}}</p>
						<span class="snp1 subtitle">{{dataList.applayList.trainingProfile}}</span>
						<li>
							<img src="../../assets/home/task3.png" alt="">
							<span>培训地点: {{dataList.applayList.address}}</span>
						</li>
						<li>
							<img src="../../assets/home/task1.png" alt="">
							<span>报名时间:
								{{dataList.applayList.registerStartTime}}-{{dataList.applayList.registerEndTime}}</span>
						</li>
						<li>
							<img src="../../assets/home/task1.png" alt="">
							<span>培训时间:
								{{dataList.applayList.trainingStartTime}}-{{dataList.applayList.trainingEndTime}}</span>
						</li>
						<!-- <span class="snp3 apply_top_text_msg" v-html="dataList.applayList.trainingDetail"></span> -->
						<button class="btnS" @click="goAppli(1)">
							立即报名
						</button>
					</div>
					<div class="apply_top_text1" v-if="dataList.type == 2">
						<p>{{dataList.applayList.trainingName}}</p>
						<li class="apply_top_text1_title">
							<p></p>
							<p>培训指南</p>
						</li>
						<span v-if="dataList.applayList.trainingGuide" class="apply_top_text1_msg"
							v-html="dataList.applayList.trainingGuide"></span>
						<span v-if="!dataList.applayList.trainingGuide">暂无指南</span>

						<div style="display: flex; justify-content: space-between;">
							<div class="apply_top_text1_user" v-for="(tea,idx) in dataList.teacherList">
								<img v-if="tea.avatar" :src="tea.avatar" alt="">
								<img v-if="!tea.avatar" src="../../assets/user/teacher.png" alt="">
								<li>
									<p>{{tea.headTeacherName}}</p>
									<span>{{tea.phone}}</span>
								</li>
							</div>
						</div>
						<div class="apply_top_text1_list">
							<li @click="openBox('room')">
								<img src="../../assets/apply/icon1.png" alt="">
								<p>食宿安排</p>
							</li>
							<p class="apply_top_text1_list_s"></p>
							<li @click="openBox('leave')">
								<img src="../../assets/apply/icon2.png" alt="">
								<p>请假</p>
							</li>
							<p class="apply_top_text1_list_s"></p>
							<li @click="openBox('photo')">
								<img src="../../assets/apply/icon3.png" alt="">
								<p>班级相册</p>
							</li>
						</div>
					</div>
				</div>
				<div class="HimgBox">
					<span class="snp3 apply_top_text_msg" v-html="dataList.applayList.trainingDetail"></span>
				</div>
			</div>

		</div>

		<div class="apply_course" v-if="dataList.type == 2">
			<li class="apply_course_title">
				<p></p>
				<p>课程安排</p>
			</li>
			<div>
				<el-collapse accordion v-model="dataList.activeName">
					<el-collapse-item name="1" v-for="(ite ,idx) in dataList.VoMap">
						<template #title>
							<div class="collapse_title">
								<img src="../../assets/apply/tabIcon.png" alt="">
								<p>第{{idx+1}}天（{{ite.name}}）</p>

							</div>
						</template>
						<div class="collapse_content">
							<li v-for="(item,idx) in ite.list">
								<p>{{item.timeBucket}} {{item.title}}
								<p class="tag flex-center" :class="
									    item.classStatus === 'missClass'
									      ? 'error'
									      : item.classStatus === 'leave'
									      ? 'warn'
									      : item.classStatus === 'attendance'
									      ? 'success'
									      : ''
									  ">
									{{
									    item.classStatus === 'missClass'
									      ? '缺课'
									      : item.classStatus === 'leave'
									      ? '请假'
									      : item.classStatus === 'attendance'
									      ? '到课'
									      : ''
									  }}
								</p>
								</p>
								<span>主讲人：{{item.teacher}}</span>
								<span>地址：{{item.address}}</span>
							</li>
						</div>
					</el-collapse-item>

				</el-collapse>
			</div>
		</div>
	</div>

	<el-dialog v-model="dataList.leave" :show-close="false" width="408px" :close-on-click-modal="false">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4>请假</h4>
				<img src="../../assets/apply/close.png" alt="" @click="openBox('leave')">
			</div>
		</template>
		<div class="my_content">
			<span>
				实行班委负责制，严格考勤纪律，每天上课前扫码签到，班委负责统计签到结果。

			</span>
			<span>
				学员因病、因事等原因不能正常上课，均须先向班委请假，班委汇报给班主任批准后，在本平台提交请假手续。
			</span>
			<li>
				<p>请假类型：</p>
				<!-- <input type="text" placeholder="请输入请假类型"> -->
				<el-select v-model="dataList.leaveType" placeholder="请选择请假类型" clearable>
					<el-option label="病假" value="病假" />
					<el-option label="事假" value="事假" />
				</el-select>
			</li>
			<li>
				<p>请假日期：</p>
				<el-date-picker v-model="dataList.leaveDate" value-format="YYYY-MM-DD" type="date" placeholder="请假日期"
					size="default" />
				<!-- <input type="text" placeholder="请输入请假时间"> -->
			</li>
			<li>
				<p>请假时间段：</p>
				<el-select v-model="dataList.leaveTimeType" placeholder="请选择请假时间段" clearable>
					<el-option label="上午" value="morning" />
					<el-option label="下午" value="afternoon" />
					<el-option label="晚上" value="evening" />
					<el-option label="全天" value="allDay" />
				</el-select>
			</li>
			<li>
				<p>请假事由：</p>
				<textarea placeholder="请输入请假事由" v-model="leaveReasons"></textarea>
			</li>
			<div class="box_btn">
				<button class="btnS" @click="submitLeave">提交</button>
			</div>
		</div>
	</el-dialog>
	<el-dialog v-model="dataList.room" :show-close="false" width="408px" :close-on-click-modal="false">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4>食宿安排</h4>
				<img src="../../assets/apply/close.png" alt="" @click="openBox('room')">
			</div>
		</template>
		<!-- accommodate
		diningCorner -->
		<div class="my_contents">
			<li class="my_contents_title">
				<p class="my_contents_title_l"></p>
				<p class="my_contents_title_text">住宿安排</p>
			</li>
			<p>{{dataList.applayList.accommodate?dataList.applayList.accommodate:'暂无安排'}}</p>
			<li class="my_contents_title">
				<p class="my_contents_title_l"></p>
				<p class="my_contents_title_text">用餐安排</p>
			</li>
			<p>{{dataList.applayList.diningCorner?dataList.applayList.diningCorner:'暂无安排'}}</p>
		</div>
	</el-dialog>
	<el-dialog v-model="dataList.photo" :show-close="false" width="660px" :close-on-click-modal="false">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4>班级相册</h4>
				<img src="../../assets/apply/close.png" alt="" @click="openBox('photo')">
			</div>
		</template>
		<div class="my_photo">
			<div class="my_photo_box">
				<img v-for="(item,idx) in dataList.classPhoto" :src="item.photoUrl" alt="">
			</div>

		</div>
	</el-dialog>
</template>

<script setup>
	import {
		getTrainingDetail,
		searchHeadTeacher,
		listTrainingPhoto,
		saveTrainingStudentLeave,
		presentTraining
	} from "../../api/home.js";
	import 'dayjs/locale/zh-cn'
	import {
		useRouter
	} from 'vue-router'
	import {
		onBeforeMount,
		reactive,
		watch,
		ref
	} from 'vue'
	const router = useRouter()
	const leaveReasons = ref('')
	const dataList = reactive({
		id: '',
		time: '',
		type: 1,
		activeName: '1',
		leave: false,
		room: false,
		photo: false,
		applayList: '',
		teacherList: '',
		leaveType: '',
		leaveDate: '',
		leaveTimeType: '',
		VoMap: [],
		classPhoto: ''
	})
	onBeforeMount(() => {
		dataList.id = router.currentRoute.value.query.id
		dataList.type = router.currentRoute.value.query.type
		// console.log(router.currentRoute.value.query, "999999999999")
		if (router.currentRoute.value.query.type == 1) {
			getTrainingDetailF(router.currentRoute.value.query.id)
		} else {
			presentTrainingF(router.currentRoute.value.query.id)
		}


	})
	watch(leaveReasons, async (newQuestion, oldQuestion) => { 
		if(newQuestion.length>100){
			leaveReasons.value = newQuestion.slice(0,100)
			ElMessage({
				message: '请将字数控制在100字以内',
				type: 'error',
			})
			return
		}
	})
	const getTrainingDetailF = (id) => {
		var data = {
			params: id
		}
		getTrainingDetail(data).then(res => {
			dataList.applayList = res.data
			getTeacher(res.data.trainingUuid)
			getPhoto(res.data.trainingUuid)
			var classList = []
			for (var key in dataList.applayList.classVoMap) {
				var item = {
					name: key,
					list: dataList.applayList.classVoMap[key]
				}
				classList.push(item)
			}
			dataList.VoMap = classList
		})
	}
	const presentTrainingF = (id) => {
		var data = {
			params: {
				trainingUuid: id,
				wxUserUuid: localStorage.getItem('userUuid')
			}

		}
		presentTraining(data).then(res => {
			dataList.applayList = res.data
			getTeacher(res.data.trainingUuid)
			getPhoto(res.data.trainingUuid)
			var classList = []
			for (var key in dataList.applayList.classStudentVoMap) {
				var item = {
					name: key,
					list: dataList.applayList.classStudentVoMap[key]
				}
				classList.push(item)
			}
			dataList.VoMap = classList
		})
	}
	// 班主任
	const getTeacher = (id) => {
		var data = {
			params: id
		}
		searchHeadTeacher(data).then(res => {
			dataList.teacherList = res.data
		})
	}

	// 班级相册

	const getPhoto = (id) => {
		var data = {
			params: id
		}
		listTrainingPhoto(data).then(res => {
			dataList.classPhoto = res.data
		})
	}

	// 请假
	const submitLeave = () => {


		var data = {
			params: {
				leaveType: dataList.leaveType,
				leaveDate: dataList.leaveDate,
				leaveTimeType: dataList.leaveTimeType,
				leaveReason: leaveReasons.value,
				trainingUuid: dataList.applayList.trainingUuid
			}

		}
		if (!dataList.leaveType) {
			ElMessage({
				message: '请选择请假类型',
				type: 'error',
			})
			return
		}
		if (!dataList.leaveDate) {
			ElMessage({
				message: '请选择请假日期',
				type: 'error',
			})
			return
		}
		if (!dataList.leaveTimeType) {
			ElMessage({
				message: '请选择请假时间段',
				type: 'error',
			})
			return
		}
		if (!leaveReasons.value) {
			ElMessage({
				message: '请输入请假事由',
				type: 'error',
			})
			return
		}
		saveTrainingStudentLeave(data).then(res => {
			if (res.code !== '500') {
				ElMessage({
					message: '提交成功',
					type: 'success',
				})
				dataList.leaveType = ''
				dataList.leaveDateStr = ''
				dataList.leaveTimeType = ''
				leaveReasons.value = ''
				openBox('leave')
			} else {
				ElMessage({
					message: '提交失败',
					type: 'error',
				})
				return
			}
		})
	}

	const openBox = (name) => {
		dataList[name] = !dataList[name]
	}
	const goAppli = (type) => {
		router.push({
			path: '/application',
			query: {
				type,
				id: dataList.id,
				trainingType:dataList.applayList.trainingType
			}
		})
	}
</script>

<style scoped lang="scss">
	.HimgBox {
		width: 1200px;
		display: flex;
		justify-content: center;

		.apply_top_text_msg {
			width: 670px;

			:deep(img) {
				width: 670px;
			}
		}
	}

	.apply {
		&_top {
			display: flex;
			width: 1200px;
			min-height: 446px;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 30px auto;
			border: 1px solid rgba(17, 145, 142, 0.2);

			.apply_top_img_box {
				width: 670px;

				.apply_top_text_msg {
					width: 670px;

					:deep(img) {
						width: 670px;
					}
				}
			}

			&_img {
				width: 670px;
				height: 446px;
			}

			&_text {
				padding: 30px;

				p {
					font-size: 18px;
					font-weight: 600;
					color: #333333;
				}

				span {
					width: 485px;
					font-size: 16px;
					font-weight: 400;
					color: #333333;
				}

				.subtitle {
					color: #666666;
					margin: 15px 0;
				}

				&_msg {
					padding: 15px 0;
					border-top: 1px solid rgba(17, 145, 142, 0.1);

					:deep(img) {
						width: 485px;
					}
				}

				li {
					padding-bottom: 15px;
					display: flex;

					img {
						width: 21px;
					}
				}

				// li:last-child{
				// 	border-bottom: 1px solid #11918E;
				// }
			}

			&_text1 {
				padding: 30px;
				width: 525px;

				&_title {
					display: flex;
					align-items: center;
					margin: 15px 0;

					p {
						color: #11918E;
						margin-left: 5px;
					}

					p:first-child {
						width: 2px;
						height: 18px;
						background: #11918E;
					}
				}

				&_user {
					display: flex;
					padding-bottom: 15px;
					margin-top: 15px;
					width: 50%;

					img {
						width: 60px;
						height: 60px;
						border-radius: 50%;
					}

					li {
						margin-left: 10px;

						p {
							margin: 5px 0;
						}
					}
				}

				&_msg {
					padding-bottom: 15px;
					display: block;
					border-bottom: 1px solid rgba(17, 145, 142, 0.1);
				}

				&_list {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-top: 15px;
					border-top: 1px solid rgba(17, 145, 142, 0.1);

					&_s {
						width: 1px;
						height: 36px;
						background: rgba(17, 145, 142, 0.2);
					}

					li {
						// height: 36px; 
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						img {
							width: 50px;
							height: 50px;
							margin-bottom: 5px;
						}
					}
				}
			}
		}

		&_course {
			width: 1200px;
			// height: 484px;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid rgba(17, 145, 142, 0.2);
			padding: 30px;

			&_title {
				display: flex;
				align-items: center;
				margin: 15px 0;

				p {
					color: #11918E;
					margin-left: 5px;
					font-size: 24px;
				}

				p:first-child {
					width: 2px;
					height: 18px;
					background: #11918E;
				}
			}

			.collapse_title {
				display: flex;
				align-items: center;

				img {
					width: 27px;
					height: 27px;
					margin-right: 15px;
				}

				p {
					font-size: 20px;
					font-weight: 600;
					color: #11918E;
				}
			}

			.collapse_content {
				padding-left: 40px;

				p {
					font-size: 18px;
					font-weight: 600;
					color: #333333;
					display: flex;
					align-items: center;

					p {
						font-size: 13px;
						margin-left: 10px;
						padding: 0 5px;
						height: 18px;
						line-height: 18px;
						border-radius: 4px;
					}

					.error {
						background-color: red;
						color: #FFFFFF;
					}

					.warn {
						background-color: red;
						color: #FFFFFF;
					}

					.success {
						background-color: #11918E;
						color: #FFFFFF;
					}
				}

				span {
					font-size: 16px;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}

	.my-header {
		position: relative;
		display: flex;
		justify-content: center;

		h4 {
			font-size: 26px;
			font-weight: 600;
			color: #11918E;
		}

		img {
			position: absolute;
			right: 0;
			top: 5px;
			width: 35px;
			height: 35px;
		}
	}

	.my_content {
		span {
			text-indent: 2em;
			display: block;
			font-size: 16px;
			font-weight: 400;
			line-height: 25px;
			color: #333333;
		}

		li {
			display: flex;
			align-items: flex-start;
			margin-bottom: 15px;

			p {
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				margin-top: 10px;
				width: 100px;
			}

			input,
			textarea {
				border: none;
				outline: medium;
				background-color: #11918E;
				padding: 12px;
				width: 260px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}

			textarea {
				height: 130px;
			}

			:deep(.el-input__wrapper) {
				background-color: #11918E;
				padding: 3px 12px;
				width: 260px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}
		}

		.box_btn {
			display: flex;
			justify-content: center;

			button {
				padding: 6px 60px;
			}
		}


	}

	.my_contents {
		height: 400px;

		&_title {
			display: flex;
			align-items: center;
			margin: 15px 0;

			&_text {
				color: #11918E;
				margin-left: 5px;
				font-size: 24px;
			}

			&_l {
				width: 2px;
				height: 20px;
				background: #11918E;
			}
		}
	}

	.my_photo {
		width: 620px;
		overflow: hidden;

		&_box {
			height: 700px;
			width: 640px;
			padding-right: 10px;
			overflow-y: scroll;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			img {
				width: 300px;
				height: 200px;
				margin-bottom: 30px;
			}
		}

	}

	:deep(.el-dialog) {
		box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03) !important;
		border-radius: 10px !important;
	}
</style>